<template>
    <div class="edit">
        <div class="custom">
            <div class="custom-c">
                <h1>擂响五月， 放“价”送“礼” 充18送18，得3600书币哦！</h1>
                <div style="margin:10px 0;"><img src="../../../public/img/edit2.png" alt=""></div>
                <div class="box"><img src="../../../public/img/edit0.png" alt=""></div>
                <div class="list">
                    <div class="list-l">
                        <div>
                            <span>一生中最自卑的时候，是遇到了爱的人一生中最自卑的时候，是遇到了爱的人一生中最自卑的时候，是遇到了爱的人</span> <img src="../../../public/img/edit2.png"
                            alt=""><img src="../../../public/img/edit4.png" alt="">
                        </div>                        
                        <h2>链接未配置</h2>
                    </div>
                    <div class="list-r"><img src="../../../public/img/edit0.png" alt=""></div>
                </div>
            </div>
            <div class="custom-f">
                <button>+添加次条</button>
            </div>
        </div>
        <div class="choice">
            <button>保存</button>
            <button>取消</button>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            };
        },
        methods: {

        }
    };

</script>
<style>
    .edit {
        padding: 0px 30%;
        margin: 50px 0;
    }

    .custom {
        padding: 25px;
        background-color: #F5F5F5;
    }

    .custom-c {
        padding: 25px;
        background-color: #fff;
    }

    .custom-c .list {
        display: flex;
        justify-content: space-between;
    }

    .custom-c .list-l img {
        margin: 0 0 5px 25px;
        cursor: pointer;
    }
    .custom-c .list-l>h2 {
        font: 14px/16px "微软雅黑";
        color: red;
    }

    .custom-c .list-r {
        width: 72px;
        height: 72px;
    }

    .custom-c .list-r>img {
        width: 72px;
        height: 72px;
        background-size: 100%;
        margin-left: 10px;
    }

    h1 {
        font: 20px/20px "微软雅黑";
        color: #666;
    }

    .box {
        overflow: hidden;
        margin-bottom: 10px;
    }
    .custom-f{
        text-align: center;
       
    }
    .custom-f>button{
        margin: 25px 0 0;
        width: 200px;
        height: 52px;
        border-radius: 8px;
        background-color: #36a4ff;
        border:0;
        color: #fff;
    }
    .choice{
        margin: 40px 75px;
        display: flex;
        justify-content: space-between;
    }
    .choice>button{
        width: 120px;
        height: 52px;
        border-radius: 4px;
        background-color: #ccc;
        border:0;
        color: #fff;
    }
    .choice>button:hover{
        background-color: #36a4ff;
    }
</style>